<template>
  <div>
    <!-- 注册页 -->
    <!-- 头部 -->
    <van-nav-bar id="head" title="注册" left-arrow :border="false">
      <template #left>
        <img
          @click="$router.history.go(-1)"
          style="width: 25%"
          src="@/assets/img/icon/arrow_left.png"
        />
      </template>
      <template #right>
        <router-link to="/login" class="link">立即登录</router-link>
      </template>
    </van-nav-bar>
    <div class="main">
      <div class="h1">欢迎注册</div>
      <div class="input-group">
        <van-field
          class="input"
          center
          required
          :error-message="nameMsg"
          v-model="sname"
          @blur.native.capture="checkName"
          type="text"
          placeholder="请输入用户名"
          @focus.native.capture="clearNameError"
        />
        <van-field
          class="input"
          center
          required
          :error-message="pwdMsg"
          v-model="pwd"
          @input="showEfficiency"
          @blur.native.capture="checkPwd"
          @focus.native.capture="clearPwdError"
          type="password"
          placeholder="请输入密码"
        />
        <div class="pwd" ref="kuang" :class="{ inp: pwd }">
          <div style="text-align: center">{{ w_or_s1 }}</div>
          <div style="text-align: center">{{ w_or_s2 }}</div>
          <div style="text-align: center">{{ w_or_s3 }}</div>
        </div>
        <van-field
          class="input"
          center
          required
          :error-message="repwdMsg"
          v-model="repwd"
          @blur.native.capture="checkRepwd"
          @focus.native.capture="clearRepwdError"
          type="password"
          placeholder="请确认密码"
        />
        <van-field
          class="input"
          center
          required
          :error-message="phoneMsg"
          v-model="phone"
          @blur.native.capture="checkPhone"
          @focus.native.capture="clearPhoneError"
          type="text"
          placeholder="请输入手机号"
        />
        <van-field
          class="input"
          center
          required
          :error-message="emailMsg"
          v-model="email"
          @blur.native.capture="checkEmail"
          @focus.native.capture="clearEmailError"
          type="text"
          placeholder="请输入注册邮箱"
        />
      </div>
      <div class="agree">
        <div @click="agree = !agree">
          <!-- 未勾选 -->
          <svg
            v-show="!agree"
            t="1648305130039"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5965"
            width="15"
            height="15"
          >
            <path
              d="M128 64a64 64 0 0 0-64 64v768a64 64 0 0 0 64 64h768a64 64 0 0 0 64-64V128a64 64 0 0 0-64-64H128z m0-64h768a128 128 0 0 1 128 128v768a128 128 0 0 1-128 128H128a128 128 0 0 1-128-128V128a128 128 0 0 1 128-128z"
              fill="#d3d3d3"
              p-id="5966"
            ></path>
          </svg>
          <!-- 勾选 -->
          <svg
            v-show="agree"
            t="1648304531164"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3969"
            id="mx_n_1648304531164"
            width="15"
            height="15"
          >
            <path
              d="M0 0m128 0l768 0q128 0 128 128l0 768q0 128-128 128l-768 0q-128 0-128-128l0-768q0-128 128-128Z"
              fill="#9a4145"
              p-id="3970"
              data-spm-anchor-id="a313x.7781069.0.i7"
              class="selected"
            ></path>
            <path
              d="M212.032 420.8l196.672 198.528 360.192-367.552 83.968 84.8-444.16 452.48L128 505.728z"
              fill="#ffffff"
              p-id="3971"
              data-spm-anchor-id="a313x.7781069.0.i9"
              class=""
            ></path>
          </svg>
        </div>
        <div ref="tiaokuan">我已同意协议条款</div>
      </div>
      <div>
        <button @click="register" class="reg">注册</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sname: "",
      nameMsg: "",
      pwd: "",
      pwdMsg: "",
      repwd: "",
      repwdMsg: "",
      phoneMsg: "",
      emailMsg: "",
      phone: "",
      email: "",
      w_or_s1: "",
      w_or_s2: "",
      w_or_s3: "",
      agree: false,
    };
  },
  methods: {
    // 验证用户名
    checkName() {
      // 非空验证
      if (!this.sname) {
        this.nameMsg = "用户名不能为空";
        return;
      }
      if (!/^\w{6,9}$/.test(this.sname)) {
        this.nameMsg = "用户名应在6~9个字符之间";
        return;
      }
      // 验证唯一性
      const url = `api/users/checkName/${this.sname}`;
      this.axios.get(url).then((res) => {
        if (res.data.code == 200) {
          this.nameMsg = "";
        } else {
          this.nameMsg = "用户名已被占用，换一个试试吧";
        }
      });
    },
    // 验证密码
    checkPwd() {
      if (
        !/[\w\s\`\~\!\#\$\%\^\&\*\(\)\[\]{\}\\\|\;\'\'\:\"\"\,\.\/\<\>\?\+\-\*\@\=]/.test(
          this.pwd
        )
      ) {
        this.pwdMsg = "密码应为英文字符以及阿拉伯数字";
        return false;
      } else if (this.pwd.length < 6 || this.pwd.length > 12) {
        this.pwdMsg = "密码长度应为6-12位";
        return false;
      } else {
        this.pwdMsg = "";
        return true;
      }
    },
    // 确认密码
    checkRepwd() {
      if (this.pwd == this.repwd) {
        this.repwdMsg = "";
        return true;
      } else {
        this.repwdMsg = "两次密码不一致";
        return false;
      }
    },
    // 验证手机号
    checkPhone() {
      if (!/^1[3-9]\d{9}$/.test(this.phone)) {
        this.phoneMsg = "手机号格式不正确";
        return;
      }
      // 验证手机号的唯一性
      const url = `api/users/checkPhone/${this.phone}`;
      this.axios.get(url).then((res) => {
        if (res.data.code == 200) {
          this.phoneMsg = "";
        } else {
          this.phoneMsg = "该手机号已被注册";
        }
      });
    },
    // 验证邮箱
    checkEmail() {
      if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(this.email)) {
        this.emailMsg = "邮箱格式不正确";
        return;
      }
      // 验证唯一性
      const url = `api/users/checkEmail?email=${this.email}`;
      this.axios.get(url).then((res) => {
        if (res.data.code == 200) {
          this.emailMsg = "";
        } else {
          this.emailMsg = "该邮箱已被注册过";
        }
      });
    },
    // 注册
    register() {
      if (this.$refs.tiaokuan.classList.length !== 0)
        this.$refs.tiaokuan.classList.remove("beat");
      if (!this.agree) {
        if (this.$refs.tiaokuan.classList.length == 0) {
          this.$refs.tiaokuan.classList.add("beat");
        }
        return;
      }
      this.checkName();
      this.checkEmail();
      this.checkPhone();
      const { nameMsg, checkPwd, checkRepwd, emailMsg, phoneMsg } = this;
      if (
        nameMsg == "" &&
        emailMsg == "" &&
        phoneMsg == "" &&
        checkPwd() &&
        checkRepwd()
      ) {
        // 验证通过，执行注册
        const { sname, pwd, email, phone } = this;
        const url = "api/users/register";
        const params = { sname, spwd: pwd, email, phone };
        this.axios.post(url, params).then((res) => {
          if (res.data.code == 200) {
            this.$toast.success("恭喜您，注册成功");
            this.$router.push("/login");
          } else {
            this.$toast.fail("抱歉，注册失败");
          }
        });
      }
    },
    clearNameError() {
      this.nameMsg = "";
    },
    clearPwdError() {
      this.pwdMsg = "";
    },
    clearRepwdError() {
      this.repwdMsg = "";
    },
    clearPhoneError() {
      this.phoneMsg = "";
    },
    clearEmailError() {
      this.emailMsg = "";
    },
    // 密码强中弱
    showEfficiency() {
      this.$refs.kuang.children.forEach = Array.prototype.forEach;
      let reg1 = /\d/;
      let reg2 = /[a-zA-Z]/;
      let reg3 =
        /[\s\`\~\!\#\$\%\^\&\*\(\)\_\[\]{\}\\\|\;\'\'\:\"\"\,\.\/\<\>\?\+\-\*\@\=]/;
      let count = 0;
      for (let i = 0; i < this.pwd.length; i++) {
        if (reg1.test(this.pwd) && reg2.test(this.pwd) && reg3.test(this.pwd)) {
          count = 3;
        } else if (
          (reg1.test(this.pwd) &&
            !reg2.test(this.pwd) &&
            !reg3.test(this.pwd)) ||
          (!reg1.test(this.pwd) &&
            reg2.test(this.pwd) &&
            !reg3.test(this.pwd)) ||
          (!reg1.test(this.pwd) && !reg2.test(this.pwd) && reg3.test(this.pwd))
        ) {
          count = 1;
        } else if (
          (reg1.test(this.pwd) &&
            reg2.test(this.pwd) &&
            !reg3.test(this.pwd)) ||
          (reg1.test(this.pwd) &&
            !reg2.test(this.pwd) &&
            reg3.test(this.pwd)) ||
          (!reg1.test(this.pwd) && reg2.test(this.pwd) && reg3.test(this.pwd))
        ) {
          count = 2;
        }
      }
      if (count == 1) {
        this.w_or_s1 = "弱";
        this.w_or_s2 = "";
        this.w_or_s3 = "";
        this.$refs.kuang.children.forEach((item) => {
          item.style.backgroundColor = "red";
        });
      } else if (count == 2) {
        this.w_or_s2 = "中";
        this.w_or_s1 = "";
        this.w_or_s3 = "";
        this.$refs.kuang.children.forEach((item) => {
          item.style.backgroundColor = "#e7e414";
        });
      } else if (count == 3) {
        this.w_or_s3 = "强";
        this.w_or_s1 = "";
        this.w_or_s2 = "";
        this.$refs.kuang.children.forEach((item) => {
          item.style.backgroundColor = "green";
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#head {
  background-color: #9a4145;
  ::v-deep .van-nav-bar__title {
    color: #fff;
  }
}
.beat {
  animation: shakeX ease-in-out 700ms 2;
}
.link {
  color: #fff;
}
.main {
  padding: 0 15px;
  .h1 {
    font-size: 1.5em;
    padding-top: 80px;
    padding-bottom: 50px;
  }
  .input {
    border-bottom: 1px solid #f6f6f6;
  }
  .input-group {
    padding-bottom: 10px;
    // 密码的强中弱
    .pwd {
      padding: 10px 0 0 15px;
      display: none;
      // 有数据的时候在显示
      &.inp {
        display: flex;
        div {
          box-sizing: border-box;
          width: 100px;
          line-height: 20px;
          margin-right: 5px;
          text-align: center;
          font-size: 0.9em;
          color: white;
          height: 20px;
        }
      }
    }
  }
  //我已同意条款样式
  > div {
    &:nth-child(3) {
      display: flex;
      align-items: center;
      > div {
        &:first-child {
          display: flex;
          align-items: center;
          padding-right: 5px;
        }
        &:nth-child(2) {
          font-size: 0.9em;
        }
      }
    }
    &:nth-child(4) {
      padding-top: 10px;
      margin: 0 !important;
      box-sizing: border-box;
      .reg {
        width: 100%;
        padding: 10px 0 8px 0;
        border: none;
        font-size: 0.8em;
        border-radius: 6px;
        color: #fff;
        background-color: #9a4145;
      }
    }
  }
}
</style>